<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/* ～～～～～～～～～ 单篇文章分页索引（健壮的） ～～～～～～～～～ */
div#article-index { border:1px solid #F2E2A1; background:#FFFCF0; font-size:0.875em; }/* 深橙色线条，浅橙色背景， 字号*/
div#article-index ul { margin-left:0; padding-left:2.2em; } /* 去除列表左侧重排 */
div#article-index ul li { list-style-image:url(../img/li_off.png); } /* 列表项图标 */
div#article-index ul li a { font-weight:normal; color:#585858; } /*列表项字号颜色*/
div#article-index ul li a.active { font-weight:bold; } /* 列表项当前项高亮 */
/* ～～～ 单篇分页计数 ～～～ */
div.pagenavcounter { text-align:center; }
/* ～～～ 单篇上下页（会对多篇分页产生干扰） ～～～ */
div.pagination ul { margin-left:0; padding-left:0; clear:both; text-align:center; } /* 清除ul左侧空白，占据正航，内容居中 */
div.pagination ul li { display:inline; display:inline; } /* 不显示列表符号，横向排列 */
/* ～～～～～～～～～ 文章列表分页 ～～～～～～～～～ */
div.pagination p.counter { text-indent:0; text-align:right; }
/* ～～～ 整体布局 ～～～ */
div.pagination ul li .pagenav { margin:0 5px; } /* 全局样式 */
div.pagination ul li a.pagenav { } /* 非当前页样式 */
div.pagination ul li span.pagenav { color:#ff8600; } /* 当前页高亮 */
/* ～～～～～～～～～ ～～～～～～～～～ ～～～～～～～～～ 注释 ～～～～～～～～～ ～～～～～～～～～ ～～～～～～～～～ */
/* ～ 全局 ～ */
div.pagination ul li.pagination-start .pagenav, div.pagination ul li.pagination-end .pagenav, div.pagination ul li.pagination-prev .pagenav, div.pagination ul li.pagination-next .pagenav { color:#313031; }/*默认样式*/
/* ～ 到首页 ～ */
div.pagination ul li.pagination-start .pagenav { background:url(../img/bg_prev_end.gif) 0 50% no-repeat !important; padding-left:10px; }
div.pagination ul li.pagination-start a.pagenav { } /* 非当前 */
div.pagination ul li.pagination-start span.pagenav { } /* 当前 */
/* ～ 到末页 ～ */
div.pagination ul li.pagination-end .pagenav { background:url(../img/bg_next_end.gif) 100% 50% no-repeat !important; padding-right:10px; }
div.pagination ul li.pagination-end a.pagenav { } /* 非当前 */
div.pagination ul li.pagination-end span.pagenav { } /* 当前 */
/* ～ 上一页 ～ */
div.pagination ul li.pagination-prev .pagenav { background:url(../img/bg_prev.gif) 0 50% no-repeat !important; padding-left:10px; }
div.pagination ul li.pagination-prev a.pagenav { } /* 非当前 */
div.pagination ul li.pagination-prev span.pagenav { } /* 当前 */
/* ～ 下一页 ～ */
div.pagination ul li.pagination-next .pagenav { background:url(../img/bg_next.gif) 100% 50% no-repeat !important; padding-right:10px; }
div.pagination ul li.pagination-next a.pagenav { } /* 非当前 */
div.pagination ul li.pagination-next span.pagenav { } /* 当前 */
/* ～～～～～～～～～ 单篇文章正文 上下页(健壮的：占据一行，ul左侧清除，内部分别居左居右) ～～～～～～～～～ */
ul.pagenav { margin-left:0; padding-left:0; position:relative; *zoom:1;
}
ul.pagenav:after { content:""; display:block; clear:both; }
ul.pagenav li { list-style:none; }
ul.pagenav li.pagenav-prev { float:left; }
ul.pagenav li.pagenav-next { float:right; }

form fieldset dt {
clear: left;
float: left;
width: 12em;
padding: 3px 0;
}
.star, .red {
color: #C00;
}
</style>
</head>
<body>
<div class="pagination">
  <p class="counter"> 第1页 共3页 </p>
  <ul>
    <li class="pagination-start"> <span class="pagenav"> 首页 </span> </li>
    <li class="pagination-prev"> <span class="pagenav"> 上页 </span> </li>
    <li> <span class="pagenav"> 1 </span> </li>
    <li> <a title="2" href="/index.php/using-joomla/extensions/components/content-component/article-category-list?start=5" class="pagenav"> 2 </a> </li>
    <li> <a title="3" href="/index.php/using-joomla/extensions/components/content-component/article-category-list?start=10" class="pagenav"> 3 </a> </li>
    <li class="pagination-next"> <a title="下页" href="/index.php/using-joomla/extensions/components/content-component/article-category-list?start=5" class="pagenav"> 下页 </a> </li>
    <li class="pagination-end"> <a title="末页" href="/index.php/using-joomla/extensions/components/content-component/article-category-list?start=10" class="pagenav"> 末页 </a> </li>
  </ul>
</div>
<hr />
<h3>单篇文章的分页</h3>
<hr>
<ul class="pagenav">
  <li class="pagenav-prev"> <a href="/index.php?option=com_content&amp;view=article&amp;id=52:users-component&amp;catid=21:components&amp;Itemid=271" rel="prev"> &lt; 上页 </a> </li>
  <li class="pagenav-next"> <a href="/index.php?option=com_content&amp;view=article&amp;id=60:news-feeds&amp;catid=21:components&amp;Itemid=267" rel="next"> 下页 &gt; </a> </li>
</ul>
<hr>
<input type="submit" name="Submit" class="button" value="登录" />
<hr>
<p class="readmore"> <a href="/index.php/using-joomla/extensions/components/content-component/article-category-list/8-beginners"> 阅读更多：Beginners</a> </p>
<hr>
<div class="registration">
  <form id="member-registration" action="/index.php/using-joomla/extensions/components/users-component/registration-form?task=registration.register" method="post" class="form-validate">
    <fieldset>
      <legend>用户注册</legend>
      <dl>
        <dt> <span class="spacer"><span class="before"></span><span class="text">
          <label id="jform_spacer-lbl" class=""><strong class="red">*</strong> 必填字段</label>
          </span><span class="after"></span></span> </dt>
        <dd>&#160;</dd>
        <dt>
          <label id="jform_name-lbl" for="jform_name" class="hasTip required" title="姓名：::输入您的全名">姓名：<span class="star">&#160;*</span></label>
        </dt>
        <dd>
          <input type="text" name="jform[name]" id="jform_name" value="" class="required" size="30"/>
        </dd>
        <dt>
          <label id="jform_username-lbl" for="jform_username" class="hasTip required" title="用户名：::输入您希望的用户名">用户名：<span class="star">&#160;*</span></label>
        </dt>
        <dd>
          <input type="text" name="jform[username]" id="jform_username" value="" class="validate-username required" size="30"/>
        </dd>
        <dt>
          <label id="jform_password1-lbl" for="jform_password1" class="hasTip required" title="密码：::输入您希望的密码-最少四个字符">密码：<span class="star">&#160;*</span></label>
        </dt>
        <dd>
          <input type="password" name="jform[password1]" id="jform_password1" value="" autocomplete="off" class="validate-password required" size="30"/>
        </dd>
        <dt>
          <label id="jform_password2-lbl" for="jform_password2" class="hasTip required" title="验证密码：::验证您的密码">验证密码：<span class="star">&#160;*</span></label>
        </dt>
        <dd>
          <input type="password" name="jform[password2]" id="jform_password2" value="" autocomplete="off" class="validate-password required" size="30"/>
        </dd>
        <dt>
          <label id="jform_email1-lbl" for="jform_email1" class="hasTip required" title="邮箱地址：::输入您的邮箱地址">邮箱地址：<span class="star">&#160;*</span></label>
        </dt>
        <dd>
          <input type="text" name="jform[email1]" class="validate-email required" id="jform_email1" value="" size="30"/>
        </dd>
        <dt>
          <label id="jform_email2-lbl" for="jform_email2" class="hasTip required" title="验证邮箱地址：::验证您的邮箱地址">验证邮箱地址：<span class="star">&#160;*</span></label>
        </dt>
        <dd>
          <input type="text" name="jform[email2]" class="validate-email required" id="jform_email2" value="" size="30"/>
        </dd>
      </dl>
    </fieldset>
    <div>
      <button type="submit" class="validate">注册</button>
      或 <a href="/" title="取消">取消</a>
      <input type="hidden" name="option" value="com_users" />
      <input type="hidden" name="task" value="registration.register" />
      <input type="hidden" name="32adc746ecc875ced751ad7037a8af6c" value="1" />
    </div>
  </form>
</div>
</body>
</html>
